<template>
    <div class="sys-org-container">
        <el-row :gutter="8" class="el-row">
            <div style="width: 100%;">
                <screeningCondition :inquireInfo="state.inquireInfo" @getChildren="getData"></screeningCondition>
            </div>
            <div class="container">
                <el-card class="table" shadow="hover">
                    <el-table :data="state.Data" class="el-table" style="width: 100%;" v-loading="state.loading"
                        row-key="id" default-expand-all
                        :tree-props="{ children: 'children', hasChildren: 'hasChildren' }" border highlight-current-row
                        :header-cell-style="{
							background: 'var(--el-color-primary)',
							height: '55px', color: '#fff', border: '1px solid #fff', fontWeight: 'bold', fontSize: '13px'
						}" :cell-style="{ padding: '2px' }" max-height="440">
                        <el-table-column type="index" label="序号" align="center"></el-table-column>
                        <el-table-column prop="deviceCode" label="设备序列号" align="center" header-align="center"
                            show-overflow-tooltip />
                        <el-table-column prop="deviceName" label="设备编号" align="center" header-align="center"
                            show-overflow-tooltip />
                        <el-table-column prop="devicePosition" label="所在位置" align="center" show-overflow-tooltip />
                        <el-table-column prop="battery" label="电量" align="center" show-overflow-tooltip />
                        <el-table-column prop="state" label="状态" align="center" show-overflow-tooltip>
                            <template #default="scope">
                                <div v-if="scope.row.state==='Idle'">空闲</div>
                                <div v-else-if="scope.row.state==='Initializin'">
                                    初始化中
                                </div>
                                <div v-else-if="scope.row.state==='InTask'">
                                    任务中
                                </div>
                                <div v-else-if="scope.row.state==='Fault'">故障</div>
                                <div v-else-if="scope.row.state==='Offline'">离线中</div>
                                <div v-else-if="scope.row.state==='InCharging'">充电中</div>
                                <div v-else-if="scope.row.state==='InUpgrading'">充电中</div>
                            </template>
                        </el-table-column>
                    </el-table>
                    <el-pagination v-model:current-page="state.queryParams.page"
                        v-model:page-size="state.queryParams.pagesize" :page-sizes="[ 20, 30, 40,50]"
                        layout="->,total, sizes, prev, pager, next, jumper" :total="state.total"
                        @size-change="handleSizeChange" @current-change="handleCurrentChange" :small="true" />
                </el-card>
            </div>
        </el-row>


        <EditOrg ref="editOrgRef" :title="state.editOrgTitle" />
    </div>
</template>

<script lang="ts" setup name="sysOrg">
    import { onMounted, reactive, ref } from 'vue';
    import { ElMessageBox, ElMessage } from 'element-plus';
    import EditOrg from '/@/views/system/putInStorage/component/editOrg.vue';
    import { getAPI } from '/@/utils/axios-utils';
    import { WmsApi } from '/@/api/wh';
    import screeningCondition from '/@/views/tools/screeningCondition.vue'

    const addDrawer = ref(false);
    const editDrawer = ref(false);
    const editOrgRef = ref();
    const state = reactive({
        loading: false,
        Data: [], // 机构列表数据
        queryParams: {
            InAndOutBoundType: 0,
            materielNum: '',
            inAndOutBoundTimeRange: [],
            page: 1,
            pagesize: 20
        },
        editOrgTitle: '',
        // specifications: [],
        specifications: ["600*600", "800*800"],
        advanced: false,
        color: '#de2910',
        size: '14px',
        ruleForm: {},
        ruleForm2: {},
        belongWarehouses: [],
        belongAreas: [],
        belongStroage: [],
        total: 0,
        inquireInfo: [
            {
                label: "设备序列号",
                value: "",
                key: "deviceCode",
                options: [],
                type: 'input'

            },
            {
                label: "设备编号",
                value: "",
                key: "deviceName",
                options: [],
                type: 'input'

            },
            {
                label: "状态",
                value: "",
                key: "state",
                options: [
                    {
                        value: 'Idle',
                        label: "空闲",
                    },
                    {
                        value: 'Initializin',
                        label: "初始化中",
                    },
                    {
                        value: 'InTask',
                        label: "任务中",
                    },
                    {
                        value: 'Fault',
                        label: "故障",
                    }
                    ,
                    {
                        value: 'Offline',
                        label: "离线中",
                    },
                    {
                        value: 'InCharging',
                        label: "充电中",
                    }
                    ,
                    {
                        value: 'InUpgrading',
                        label: "升级中",
                    }
                ],
                type: 'select'
            },
            
        ],
        value: {}
        // editDrawer:false
    });

    onMounted(() => {
        getData(state.queryParams);
    });
    const getData = (value) => {
        state.value = value;
        // if (value.inAndOutBoundTimeRange) {
        // 	var inAndOutBoundTimeRange = [value.inAndOutBoundTimeRange[0], value.inAndOutBoundTimeRange[1]]
        // } else {
        // 	var inAndOutBoundTimeRange = []
        // }
        var params = {
            page: state.queryParams.page,
            pagesize: state.queryParams.pagesize,
            deviceCode: value.deviceCode,
            deviceName: value.deviceName,
            orderId: value.orderId,
            state: value.state
        }
        WmsApi().CheckAgvStatus(params)
            .then(function (res) {
                console.log(res);
                state.Data = res.data.result.items;
                state.total = res.data.result.total;
            })
            .catch(function (error) {
                console.log(error);
            });
    }

    const process = (a) => {
        if (a.includes(",")) {
            return a.substring(0, a.length - 1)
        } else {
            return a
        }
    }

    const openEditOrg = (row) => {
        state.editOrgTitle = '查看入库单详情';
        editOrgRef.value?.openDialog(row);
    };
    // const submit = () => {
    // 	axios.post('/api/eGJoinBound/joinBoundAdd', state.ruleForm)
    // 		.then(function (response) {
    // 			console.log(response);
    // 			getData(state.queryParams);
    // 		})
    // 		.catch(function (error) {
    // 			console.log(error);
    // 		});
    // 	addDrawer.value = false;

    // }
    const ConfirmPutIn = () => {

    }
    // 打开编辑页面
    const openEdit = (row) => {
        editDrawer.value = true;
        state.ruleForm2 = Object.assign({},row)

    };
    const toggleAdvanced = () => {
        state.advanced = !state.advanced;
        console.log(state.advanced);

    }

    const handleSizeChange = (val) => {
        state.queryParams.pagesize = val;
        state.queryParams.deviceCode = state.value.deviceCode;
        state.queryParams.deviceName = state.value.deviceName;
        state.queryParams.orderId = state.value.orderId;
        state.queryParams.state = state.value.state;

        getData(state.queryParams);
    };
    const handleCurrentChange = (newVal) => {
        state.queryParams.page = newVal;
        state.queryParams.deviceCode = state.value.deviceCode;
        state.queryParams.deviceName = state.value.deviceName;
        state.queryParams.orderId = state.value.orderId;
        state.queryParams.state = state.value.state;

        getData(state.queryParams);
    };

</script>
<style lang="scss" scoped>
    .fl {
        width: 60%;
        margin: 20px 80px;
    }

    .container {
        margin-top: 15px;
        width: 100%;
        display: flex;
        flex-direction: column;
        height: calc(100% - 82px);
    }

    .table {
        width: 100%;
        flex: 1;
        height: 100%;
    }

    .el-table {
        width: 100%;

        /* overflow: auto; */
    }
</style>